<template>
	<view>
		<!-- 数据列表 -->
		<!-- <view class="addSite" @tap="toAddCar">
			<u-button shape="circle" type="primary" text="添加车辆"></u-button>
		</view> -->
	<!-- 	<view style="padding-top: 20rpx;">
			<view style="width: 90%;margin: 0 auto;"> <u-search placeholder="请输入加油站名称或订单号" v-model="keyword" bg-color="#fff"
					@search="search" @custom="search"></u-search>
			</view>
		</view> -->
		<!-- 时间选择 -->
		<view class="time-filter">
			<uni-datetime-picker v-model="currentTime" type="datetimerange" @change="handleTimeConfirm($event)" />
		</view>
		<scroll-view scroll-y style="height: 85vh;padding-top: 20rpx;" @scrolltolower="loadMore">
			<view class="listNull" v-if="recordList.length == 0">
				<img src="@/static/images/listNull.png" alt="" />
				<text>暂无返现记录</text>
			</view>
			<view class='list' v-for="(item,index) in recordList " :key="index">
				<view class='item'>
					<view class='listn'>
						<view class='itemn flex-between'>
							<view>
								<view class='name line1'>{{item.action}}</view>
								<view>{{item.time}}</view>
							</view>
							<view class='num' v-if="item.state==1">+{{item.num}}</view>
							<view class='num font-color' v-else>-{{item.num}}</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 加载状态 -->
			<u-loadmore :status="loadingState" icon-type="circle" />
		</scroll-view>

		<!-- 分页控件 -->
		<u-pagination v-model="page" :page-count="pageCount" :total="pageTotal" mode="button" @change="pageChange" />
	</view>
</template>

<script lang="ts" setup>
	import API from "@/api/index.js"
	import { ref, reactive, computed } from "vue"
	import { onLoad, onReachBottom, onShow } from '@dcloudio/uni-app'
	import { route } from "@/uni_modules/uview-plus";
	let recordList = reactive([{
		action: '新用户增送',
		num: 99,
		state: 1,
		time: '2020-08-21 21:11:09'
	}, {
		action: 'xx加油站消费增送',
		num: 19,
		state: 1,
		time: '2020-08-21 21:11:09'
	}, {
		action: 'xx加油站消费抵扣',
		num: 30,
		state: 0,
		time: '2020-08-21 21:11:09'
	}])
	const keyword = ref('')
	const isSelect = ref(0);
	// const addressId = ref(null)
	let page = ref(1)
	let pageSize = ref(10)
	let pageTotal = ref(10)
	let loading = ref(false)
	let loadingState = ref('loadmore')
	let condition = reactive([{
		"filedIndex": "uid",
		"filedValue": uni.getStorageSync('userInfo').id
	},{
		"filedIndex": "type",
		"filedValue": '提款'
	}])

	// 计算总页数
	const pageCount = computed(() => {
		return Math.ceil(pageTotal.value / pageSize.value)
	})
	onLoad((options) => {
		getData(1)
	})
	const currentTime = ref([Date.now() - 1000000000, Date.now()])
	// 方法
	const handleTimeConfirm = (time) => {
		console.log('选择的时间：', time, currentTime.value)
		currentTime.value[0] = time[0]
		currentTime.value[1] = time[1]
		// keyword.value = ''
		condition[2] = {
			"filedIndex": "date",
			"filedValue":  time.toString()
		}
		getData(1)
	}
	// 搜索
	const search = async (value) => {
		console.log("搜索值", value,!!Number(value));
		recordList.length = 0
		// 去除空格字符
		let val = value.replace(/\s/g, "")
		if (val == '' || val == null) {
			condition[1] = {
				"filedIndex": "name",
				"filedValue": null
			}
		} else if(!!Number(value)){
			// 订单号查询
			condition[1] = {
				"filedIndex": "oid",
				"filedValue": value
			}
		} else{
			// 加油站名称查询
			condition[1] = {
				"filedIndex": "name",
				"filedValue": value
			}
		}
		console.log("condition",condition);
		getData(1)
	}
	// 获取列表数据
	const getData = async (index) => {
		// 处理中condition中为null的数据
		const conditionArray = condition.filter(item => item !== null);

		try {
			loadingState.value = 'loading'
			let res = await API.CashFlowList({
				"pageIndex": index,
				"pageSize": pageSize.value,
				"condition": conditionArray
			})
			console.log("getData res", res.data.list, index);
			if (index == 1) {
				recordList.length=0
				Object.assign(recordList, res.data.list)
			} else {
				recordList.push(...res.data.list)
			}
			pageTotal.value = res.data.total
			page.value = res.data.currentPage
			loadingState.value = recordList.length >= pageTotal.value ? 'nomore' : 'loadmore'
		} catch (e) {
			loadingState.value = 'error'
		}

		// page.value = res.data.currentPage
	}

	// 页码变化
	const pageChange = (page) => {
		page.value = page
		console.log("页码变化了", page.value);
		getData(page.value)
	}
	// 加载更多（滚动到底部）
	const loadMore = () => {
		console.log("滚动到底了");
		console.log(page.value, pageCount.value);
		if (page.value < pageCount.value) {
			page.value++
			setTimeout(() => {
				getData(page.value)
			}, 1000)
		}
	}
	// 修改默认车辆
	const edit = (item) => {
		console.log("edit", item);
		uni.showModal({
			title: '温馨提示',
			content: `确认将车牌号为<${item.carPlate}>的车辆设为默认车辆？`,
			success(res) {
				if (res.confirm) {
					API.setDef(uni.getStorageSync('userInfo').id, item.id).then(res => {
						console.log("修改后状态", res);
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
						getData(1)
					}).catch(err => {
						uni.showToast({
							title: "修改失败，请重新操作！",
							icon: "none"
						})
					})
				}
			}
		})
	}
	// 添加车辆：重新认证
	const toAddCar = () => {
		// uni.navigateTo({
		// 	url: '/pages/users/user_certification/index?index=1'
		// });
		uni.navigateTo({
			url: '/pages/users/user_certification/components/step2?addCar=true'
		});
	}
	// del
	const del = (item, index) => {
		console.log("del", item, index);
		uni.showModal({
			title: '温馨提示',
			content: `确认删除车牌号为<${item.carPlate}>的车辆？`,
			success(res) {
				if (res.confirm) {
					API.deleteVehicles(item.id).then(res => {
						console.log("删除后状态", res);
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
						recordList.splice(index, 1)
						getData(1)
					}).catch(err => {
						uni.showToast({
							title: "删除失败，请重新操作！",
							icon: "none"
						})
					})
				}
			}
		})
	}
</script>
<style>
	>>>.u-icon {
		margin-left: 30rpx !important;
	}
</style>
<style lang="scss" scoped>
	.time-filter {
		margin: 20rpx 0;
		text-align: center;
	}
	.listNull {
		display: flex;
		flex-direction: column;
		text-align: center;
		margin: 0 auto;
	
		image {
			width: 200rpx;
			height: 200rpx;
			// margin: 10% 0 10% 10%;
			margin: 20rpx auto;
		}
	
		text {
			color: #919ea9;
		}
	}
	
	.list .item .listn {
		background-color: #fff;
		font-size: 12px;
		color: #999;
	
	}
	.list .item .listn .itemn {
		border-bottom: 1px solid #eee;
		padding: 15px;
	
	}
	.list .item .listn .itemn .num {
		font-size: 18px;
		font-family: 'Guildford Pro';
		color: #16ac57;
	}
	.list .item .listn .itemn .name {
		font-size: 14px;
		color: #282828;
		margin-bottom: 5px;
	}
	 .list .item .listn .itemn .num.font-color {
		color: red !important;
	}
	
	.wrap {
		// height: 88vh;
		// overflow: auto;
		padding-bottom: 60rpx;
	}

	.bg {
		// border: 1px solid #FF4110 !important;
	}

	.icon {
		margin-left: 30rpx;
		display: flex;

	}

	.addSite {
		padding: 20px;
		position: sticky;
		left: 0;
		top: 0;
		background-color: #fff;
		// border-radius: 20rpx;
		z-index: 9;
	}
</style>